<template>
  <el-card class="sourcing-form-card" shadow="never">
    <el-row slot="header" type="flex" justify="space-between" align="middle">
      <span>商品信息</span>
      <el-button
        v-if="!isReadOnly"
        size="mini"
        :loading="deleteLoading"
        :disabled="noSelectData"
        @click="handleDelete(null)"
      >批量删除</el-button>
    </el-row>
    <BasicTable
      :showActionCol="!isReadOnly"
      :show-select-col="!isReadOnly"
      :show-pagination="false"
      :show-total="false"
      :tableMaxHeight="400"
      :loading="tableInfo.loading"
      :data-source="tableInfo.list"
      :columns="tableInfo.columns"
      :actionRender="renderTableBtnAction"
      :selection-change="handleSelect"
    />
  </el-card>
</template>
<script>
import BasicTable from '@/pages/sourcing/components/BasicList';
import { getTableAction } from '@/utils/getBtnsRender'
import {
  queryBillGoodsService,
  deleteBillGoodsService
} from '@api/sourcing/selfPurchaseInquiry'
import { GOODS_TABLE_COLUMNS } from '../constants'

export default {
  // 单据商品信息
  props: ['isReadOnly', 'selfPurchaseBillId'],
  components: {
    BasicTable
  },
  data () {
    return {
      deleteLoading: false,
      tableInfo: {
        columns: GOODS_TABLE_COLUMNS,
        list: [],
        loading: false,
        selection: []
      }
    }
  },
  computed: {
    noSelectData () {
      return this.tableInfo.selection.length === 0
    }
  },
  watch: {
    selfPurchaseBillId: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.selfPurchaseBillId = newVal;
        }
        this.getTableData()
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    async getTableData () {
      const res = await queryBillGoodsService({ selfPurchaseBillId: this.selfPurchaseBillId }, state => { this.tableInfo.loading = state })
      if (res?.data) {
        this.tableInfo.list = res.data
      } else if (res && res.data == null) {
        this.$message.error('单据已删除')
        setTimeout(() => {
          window.close()
        }, 1000)
      }
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '删除', method: this.handleDelete }
      ]
      return getTableAction({ h, row, actionList })
    },
    // 勾选
    handleSelect (val) {
      this.tableInfo.selection = val;
    },
    // 删除商品
    handleDelete (row) {
      let tipMsg = '您确定要删除该商品吗？删除商品后，该商品需重新发起询价，已报价信息将删除。'
      let deleteIds = [];
      if (row) {
        deleteIds.push(row.selfPurchaseBillDetailsId)
      } else {
        const { list, selection } = this.tableInfo
        if (list.length == selection.length) {
          tipMsg = '商品全部删除后，该采购询价单删除，需重新发起询价并重新报价，您确认吗？'
        }
        deleteIds = selection.map(item => item.selfPurchaseBillDetailsId)
      }
      this.$confirm(tipMsg, '提示', { type: 'warning' })
        .then(() => {
          this.deleteGoodsAction(deleteIds)
        })
        .catch(() => {});
    },
    async deleteGoodsAction (idList) {
      const res = await deleteBillGoodsService(idList, state => { this.tableInfo.loading = state })
      if (res) {
        this.$message.success('删除成功')
        this.getTableData()
      }
    }

  }
}
</script>
